import React, { CSSProperties } from 'react'
import {Badge} from "antd";
import {StarBorder,ShoppingCartOutlined} from '@material-ui/icons'
import { withRouter,RouteComponentProps } from 'react-router'
import CartStore from '../../../store/modules/cartStore'
import UserStore from '../../../store/modules/userStore'
import {inject,observer} from 'mobx-react'
import PubSub from 'pubsub-js'
import Message from '../../../components/Message/Message'

const FooterStyle: CSSProperties = {
    height: '56px',
    position: 'fixed',
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 100,
    boxShadow: '-2px 0px 24px 0px rgb(0 0 0 / 10%)',
    display: 'flex',
    flexFlow: 'row nowrap'
}
const BtnStyle: CSSProperties = {
    width: '25%',
    height: '100%',
    backgroundColor: '#fff',
    color: '#999',
    display: 'flex',
    flexFlow: 'column nowrap',
    justifyContent: 'space-around',
    alignItems: 'center',
    padding: '8px',
    fontSize: '12px'
}
const AddBtnStyle: CSSProperties = {
    width: '50%',
    height: '100%',
    backgroundColor: '#f03e3e',
    color: '#fff',
    lineHeight: '56px',
    fontSize: '13px',
    textAlign: 'center'
}

interface IProps extends RouteComponentProps{
    cartStore?: CartStore;
    userStore?: UserStore;
    goodId: number;
    goodName: string;
    goodcover: string;
    goodMethod: string;
}
const CartFooter = (props: IProps) => {
    const [money,setMoney] = React.useState(0)
    const [size,setSize] = React.useState('')
    const [color,setColor] = React.useState('')
    const [num,setNum] = React.useState(0)
    React.useEffect(() => {
        if(props.userStore?.isLogin) props.cartStore?.getUserCart()
        PubSub.subscribe('changeMoney',(_,data) => {
            setMoney(data)
        })
        PubSub.subscribe('changeSize',(_,data) => {
            setSize(data)
        })
        PubSub.subscribe('changColor',(_,data) => {
            setColor(data)
        })
        PubSub.subscribe('changeNum',(_,data) => {
            setNum(data)
        })
        return () => {
            PubSub.clearAllSubscriptions()
        }
    },[ ])// eslint-disable-line react-hooks/exhaustive-deps
    const handleAddCart = () => {
        if(!props.userStore?.isLogin){
            Message('warning','请先登录后再操作')
            return
        }
        props.cartStore?.userAddCart(props.goodId,props.goodName,num,props.goodcover,props.goodMethod,color,size,money)
    }
    return (
        <div style={FooterStyle}>
            <div style={BtnStyle}>
                <StarBorder fontSize='small'/>
                <div>
                    收藏
                </div>
            </div>
            <div style={BtnStyle} onClick={() => {
                props.history.push('/cart')
            }}>
                {
                    props.userStore?.isLogin ?
                        (
                            <Badge count={props.cartStore?.cartList.length} size='small'>
                                <ShoppingCartOutlined fontSize='small'/>
                            </Badge>
                        ) :
                        (
                            <ShoppingCartOutlined fontSize='small'/>
                        )
                }
                <div>
                    购物车
                </div>
            </div>
            <div style={AddBtnStyle} onClick={handleAddCart}>
                加入购物车
            </div>
        </div>
    )
}

export default withRouter(inject('cartStore','userStore')(observer(CartFooter)))